<template>
  <div>
    <d2-crud
      ref="d2Crud"
      :columns="columns"
      :data="dataList"
      :options="options"
      index-row
      selection-row
      @row-click="rowClick"
      @selection-change="selectChange"
      :pagination="pagination"
      @pagination-current-change="pageChange">
      <div class="title" slot="header">
        <span class="text">登录日志</span>
        <div class="dateFilter">
          <span>
            <el-date-picker
              v-model="date"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </span>
          <span style="margin-left:20px;"><el-button type="primary" @click="search"> 搜索</el-button></span>
        </div>
      </div>
    </d2-crud>
    <detail-info v-model="detailVisible" ref="detailFrom" @submit="_fetchListData"/>
  </div>
</template>
<script>
  import detailInfo from "./detail-info";
  import workflowApi from '@/api/system/workflow';
  import utils from '@/assets/utils/zhzf-util';
  import {mapState, mapActions} from 'vuex'
  import HeadBtns from "@/views/comps/zhzf/head-btns";

  export default {
    components: {HeadBtns, detailInfo},
    data() {
      return {
        dataList: [],
        detailVisible: false,
        columns: [
          // {title: '用户ID', key: 'userId'},
          {title: '用户名', key: 'userName'},
          {title: 'IP', key: 'operIp'},
          {
            title: '登录时间', key: 'loginDatetime', formatter: (row, col, val) => {
              return utils.formatDts(val, 'YYYY-MM-DD HH:mm:ss')
            }
          },
        ],
        // rowHandle: {
        //   custom: [
        //     {title: '修改', size: 'mini', emit: 'edit-model', icon: "el-icon-edit", style: "color:#67c23a;"},
        //     {title: '删除', size: 'mini', emit: 'del-model', icon: "el-icon-delete", style: "color:#f56c6c;"}
        //   ]
        // },
        options: {
          stripe: true,
          highlightCurrentRow: true
        },
        pagination: {
          currentPage: 1,
          pageSize: utils.getPageSize(),
          total: 0
        },
        queryParam: {},
        selected: [],
        date: [],
      };
    },
    mounted() {
      this.initPage();
    },
    computed: {
      ...mapState('d2admin/user', [
        'info'
      ])
    },
    methods: {
      async initPage() {
        await this._fetchListData();
      },
      async _fetchListData(date) {
        let resp = null;
        if (date) {
          resp = await workflowApi.loginLog({...this.pagination, userId: this.info.id, begin: date[0], end: date[1]});
        } else {
          resp = await workflowApi.loginLog({...this.pagination, userId: this.info.id});
        }
        if (resp) {
          this.dataList = resp.data.rows;
        }
        this.pagination.total = resp.data.total || this.dataList.length;
      },
      pageChange(currentPage) {
        this.pagination.currentPage = currentPage;
        this._fetchListData();
      },
      rowClick(row) {
        this.$refs.d2Crud.$children[2].toggleRowSelection(row);
      },
      selectChange(selection) {
        this.selected = selection;
      },
      showDetail(row) {
        this.detailVisible = true;
        this.$refs.detailFrom.initPage(row);
      },
      async search() {
        let date = [];
        for (let i = 0; i < this.date.length; i++) {
          date.push(utils.formatDts(this.date[i], 'YYYY-MM-DD'));
        }
        await this._fetchListData(date);
      },
      async submitDel(ids) {
        await discretionApi.del(ids);
        await this.initPage();
      }
    }
  };
</script>

<style lang="scss">
  .dateFilter {
    float: right;
    margin-right: 30px;
  }
</style>
